<template>
    <div class="shop">
      <!-- 头部导航 -->
      <!-- <el-row :gutter="10" class="top">
        <el-col :span="2"><div class="grid-content bg-purple" @click="home">网站首页</div></el-col>
        <el-col :span="15"><div class="grid-content bg-purple-light" @click="home">鲜花网站</div></el-col>
        <el-col :span="2"><div class="grid-content bg-purple" @click="goto">退出登录</div></el-col>
        <el-col :span="2"><div class="grid-content bg-purple-light" @click="admin">admin</div></el-col>
        <el-col :span="2"><div class="grid-content bg-purple-light" @click="shopcart">购物车</div></el-col>
      </el-row>-->
      <div class="header">
        <div class="h-left">
          <span>Welcome to our store!</span>
        </div>
        <div class="h-right">
          <span @click="shoppingcart()">我的购物车</span>|
          <span>去领优惠券</span>|
          <span @click="admin()">Admin</span>|
          <span @click="goto()">退出登录</span>
        </div>
      </div>
  
      <div class="search">
        <div class="s-left">
          <img src="../img/logo.jpg" alt  style="width: 148px;height:148px"/>
        </div>
        <div class="s-right">
          <el-input placeholder="请输入内容" v-model="mysearch" class="input-with-select" style="width:500px;">
            <el-button slot="append" icon="el-icon-search" @click="toSearch()"></el-button>
          </el-input>
        </div>
      </div>
  
      <div class="nav">
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
          style="padding:0 100px;">
          <el-menu-item index="1" style="backgroundColor:pink;">商品分类</el-menu-item>
          <el-submenu index="2">
            <template slot="title">鲜花</template>
            <el-menu-item index="2-1">选项1</el-menu-item>
            <el-menu-item index="2-2">选项2</el-menu-item>
            <el-menu-item index="2-3">选项3</el-menu-item>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">花束</template>
            <el-menu-item index="2-1">选项1</el-menu-item>
            <el-menu-item index="2-2">选项2</el-menu-item>
            <el-menu-item index="2-3">选项3</el-menu-item>
          </el-submenu>
          <el-submenu index="4">
            <template slot="title">礼品</template>
            <el-menu-item index="2-1">选项1</el-menu-item>
            <el-menu-item index="2-2">选项2</el-menu-item>
            <el-menu-item index="2-3">选项3</el-menu-item>
          </el-submenu>
          <el-submenu index="5">
            <template slot="title">蛋糕</template>
            <el-menu-item index="2-1">选项1</el-menu-item>
            <el-menu-item index="2-2">选项2</el-menu-item>
            <el-menu-item index="2-3">选项3</el-menu-item>
          </el-submenu>
          <el-submenu index="6">
            <template slot="title">花篮</template>
            <el-menu-item index="2-1">选项1</el-menu-item>
            <el-menu-item index="2-2">选项2</el-menu-item>
            <el-menu-item index="2-3">选项3</el-menu-item>
          </el-submenu>
        </el-menu>
      </div>
  
      <div id="swipercom">
        <div class="swiper-container" id="swiperIndex">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(item,i) in imgs" :key="i">
              <img :src="item.pic" alt />
            </div>
          </div>
          <div class="swiper-pagination"></div>
          <div class="swiper-button-next"></div>
          <div class="swiper-button-prev"></div>
          <!-- <div class="swiper-scrollbar"></div> -->
        </div>
      </div>
  
      <!-- 分类选择 -->
      <div class="choice">
        <!-- 品牌 -->
        <div class="title">
          <span>品牌：</span>
          <span class="span" @click="change1(index),filterflowers(item.id)" :class="{change:index == indexOf1}"
            v-for="(item,index) in type" :key="index">{{item.name}}</span>
        </div>
        <!-- 排序 -->
        <div class="title">
          <span>排序：</span>
          <span class="span" @click="change2(index),filterflowers1(index)" :class="{change:index == indexOf2}"
            :key="item.index" v-for="(item,index) in sort">{{item}}</span>
        </div>
      </div>
  
      <el-divider></el-divider>
  
      <div>
        <el-row :gutter="24" class="row" style="box-sizing:border-box;margin:0 35px;">
          <div v-for="item in flowers" :key="item.index">
            <el-col :span="6" class="col">
              <div class="grid-content bg-purple col-bc">
                <!-- 花朵图片 -->
                <img :src="item.url" />
                <!-- 花朵价格介绍 -->
                <div class="price">
                  <div>{{item.name}}</div>
                  <p>销量{{item.number}}</p>
                  <span>￥{{item.price}}</span>
                  <div>
                    <el-button @click="add(item)" size="mini" type="danger" plain>添加购物车</el-button>
                  </div>
                </div>
              </div>
            </el-col>
          </div>
        </el-row>
      </div>
  
      <!-- <div class="copyright"></div> -->
    </div>
  </template>
  
  <script>
  import Swiper from 'swiper';
    export default {
      name: "shop",
      data() {
        return {
          /* 判断显示第几个品牌 */
          indexOf1: 0,
          /* 判断显示第几个排序 */
          indexOf2: 0,
          mysearch: "",
          activeIndex: "1",
          imgs: [{
              // pic: require("../img/swiper1.jpg")
            }
          ],
  
          /* 品牌分类 */
          type: [{
              id: 0,
              name: "全部"
            },
            {
              id: 1,
              name: "水果"
            },
            {
              id: 2,
              name: "美食"
            },
            {
              id: 3,
              name: "棉花娃娃"
            },
            {
              id: 4,
              name: "谷子"
            },
            {
              id: 5,
              name: "猜你喜欢"
            }
          ],
          /* 排序分类 */
          sort: ["全部", "销量", "价格"],
          /* 商品列表 */
          flowers: [],
          searchflowers: [],
          /* 商品列表数据库 */
          flower: [{
              id: 1,
              url: require("../img/13.jpg"),
              name: "西瓜",
              number: 20,
              price: 200,
              belong: 1
            },
            {
              id: 2,
              url: require("../img/14.jpg"),
              name: "桃子",
              number: 16,
              price: 160,
              belong: 1
            },
            {
              id: 3,
              url: require("../img/11.jpg"),
              name: "杨梅",
              number: 20,
              price: 200,
              belong: 1
            },
            {
              id: 4,
              url: require("../img/12.jpg"),
              name: "樱桃",
              number: 14,
              price: 140,
              belong: 1
            },
            {
              id: 5,
              url: require("../img/5.jpg"),
              name: "牛肉芝士汉堡",
              number: 30,
              price: 80,
              belong: 2
            },
            {
              id: 6,
              url: require("../img/6.jpg"),
              name: "eva情人节糕特",
              number: 32,
              price: 120,
              belong: 2
            },
            {
              id: 7,
              url: require("../img/8.jpg"),
              name: "油爆大虾",
              number: 20,
              price: 200,
              belong: 2
            },
            {
              id: 8,
              url: require("../img/3.jpg"),
              name: "达达利亚冬夜愚戏吧唧",
              number: 6,
              price: 60,
              belong: 5
            },
            {
              id: 9,
              url: require("../img/4.jpg"),
              name: "米切尔凯撒广岛立牌",
              number: 8,
              price: 60,
              belong: 5
            },
            {
              id: 10,
              url: require("../img/7.jpg"),
              name: "糸师凛狗狗眼透卡",
              number: 5,
              price: 50,
              belong: 4
            },
            {
              id: 11,
              url: require("../img/9.jpg"),
              name: "糸师冴crux吧唧",
              number: 8,
              price: 80,
              belong: 4
            },
            {
              id: 12,
              url: require("../img/2.jpg"),
              name: "岚豆包",
              number: 6,
              price: 60,
              belong: 3
            },
            {
              id: 13,
              url: require("../img/10.jpg"),
              name: "夏鸣星hz娃娃",
              number: 8,
              price: 80,
              belong: 3
            }
          ]
        };
      },
      methods: {
        /* 更改所选的品牌 */
        change1(index) {
          this.indexOf1 = index;
        },
        /* 更改所选的排序 */
        change2(index) {
          this.indexOf2 = index;
        },
        /* 向shop组件跳转 */
        home() {
          this.$router.push("/shop");
        },
        /* 向admin组件跳转 */
        admin() {
          this.$router.push("/admin");
        },
        /* 退出登录功能 */
        goto() {
          this.$confirm("是否退出登录？", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            })
            .then(() => {
              /* 确定退出事件回调 */
              this.$message({
                type: "success",
                message: "退出成功!"
              });
              this.$router.push("/");
            })
            .catch(() => {
              /* 取消退出事件回调 */
              this.$message({
                type: "info",
                message: "取消退出"
              });
            });
        },
        /* 向shoppingcart组件跳转 */
        shoppingcart() {
          this.$router.push("/shoppingcart");
        },
        toSearch() {
          if (this.mysearch == "") {
            this.$message({
              type: "info",
              message: "请输入内容再搜索哟！"
            });
          }
          if (this.mysearch !== "") {
            this.searchflowers = [];
            this.flower.map((item) => {
              if (item.name.includes(this.mysearch)) {
                this.searchflowers.push(item);
                console.log(this.flower)
              }
            })
            this.flowers = this.searchflowers;
          }
        },
        handleSelect(key, keyPath) {
          console.log(key, keyPath);
        },
        mysort(i) { //  a[i] - b[i]为正序，倒叙为  b[i] - a[i]
          return function(a, b) {
            return b[i] - a[i]
          }
        },
        /* 过滤筛选所选的 */
        filterflowers(id) {
          /* 如果是首次加载 */
          if (id == 0) {
            this.flowers.slice(0);
            this.flowers.push(...this.flower);
          } else {
            /* 通过换品牌来筛选 */
            let res = this.flower.filter(item => {
              return item.belong == id;
            });
            this.flowers.splice(0);
            this.flowers.push(...res);
          }
        },
        filterflowers1(index) {
          /* 如果是首次加载 */
          if (index == 0) {
            this.flowers.slice(0);
            this.flowers.push(...this.flower);
          }
          if (index == 1) {
            this.flowers = this.flowers.sort(this.mysort("number"))
          }
          if (index == 2) {
            this.flowers = this.flowers.sort(this.mysort("price"))
          }
        },
        /* 添加 */
        add(item) {
          this.$message({
            message: "添加购物车成功",
            type: "success"
          });
          this.$store.commit("add", item);
        }
      },
      mounted() {
        this.filterflowers(0);
        this.filterflowers1(0);
        var mySwiper = new Swiper('#swiperIndex', {
          //配置分页器内容
  
          loop: true, // 循环模式选项
          pagination: {
            el: ".swiper-pagination", //换页器与哪个标签关联
            clickable: true //分页器是否可以点击
          },
          // 如果需要前进后退按钮
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
          //如果需要滚动条
          scrollbar: {
            el: '.swiper-scrollbar',
          },
        })
      }
    };
  </script>
  
  <style scoped>
    .shop {
      background: #f6eeef;
      box-sizing: border-box;
    }
  
    .top {
      height: 40px;
      background: #7c7272;
      color: #ffffff;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  
    .header {
      box-sizing: border-box;
      height: 40px;
      width: 100%;
      /* padding: 100px; */
      padding: 0 100px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: rgb(227, 187, 193);
      font-size: 14px;
    }
  
    .h-right>span {
      margin: 0 10px;
      cursor: pointer;
    }
  
    .search {
      height: 150px;
      width: 100%;
      box-sizing: border-box;
      padding: 0 100px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  
    .s-left>img {
      width: 200px;
    }
  
    .choice {
      padding: 40px 0 20px 30px;
    }
  
    .title {
      margin-top: 10px;
    }
  
    .span {
      border: 1px solid #ffffff;
      margin-right: 20px;
      padding: 2px 10px;
      border-radius: 5px;
      cursor: pointer;
    }
  
    .change {
      background: #dd93a1;
    }
  
    .col {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;
    }
  
    .col img {
      border-radius: 10px;
      width: 250px;
      height: 250px;
      margin-top: 10px;
    }
  
    .col-bc {
      background: #ffffff;
      border: 1px solid #e5e4e4;
      border-radius: 10px;
    }
  
    .col-bc:hover {
      border: 1px solid #f5e4ea;
      box-shadow: 0 0 20px #aaa;
    }
  
    .price {
      text-align: center;
      margin-bottom: 20px;
    }
  
    .price span {
      color: red;
    }
  
    .swiper-slide>img {
      width: 100%;
    }
  
    .copyright {
      width: 100%;
      height: 300px;
      background-color: #dd9fa5;
    }
  </style>
  